<template>
  <div class="login_content">
    <el-card class="login_card" shadow="hover">
      <template v-slot:header>
        <h2 style="color: white">Tomorrow will be better</h2>
      </template>
      <el-input class="login_input" v-model="loginForm.loginName" maxlength="20"><i class="el-icon-s-custom" slot="suffix"></i></el-input>
      <el-input class="login_input" type="password" v-model="loginForm.password" maxlength="20"><i class="el-icon-key el-input__icon" slot="suffix"></i></el-input>
      <el-button class="login_button" type="primary" @click="login" :loading="loginLoading">login in</el-button>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: "login",
    data(){
      return {
        loginForm: {
          loginName: '',
          password: ''
        },
        loginLoading: false
      }
    },
    methods:{
      // 登录 储存token
      login(){
        this.loginLoading = true;
        this.$ajax.login(this.loginForm).then(res=>{
          // 设置token 有效时长1小时
          this.$ls.set('token',res,60 * 60 * 1000);
          this.$ls.set('user',this.loginForm.loginName,60 * 60 * 1000);
          return this.$ajax.getUserByLoginName(this.loginForm.loginName);
        }).then(res =>{
          this.$ls.set('userInfo',JSON.stringify(res));
          let param = {
            'loginName': this.loginForm.loginName
          };
          return this.$ajax.getUserMenu(param);
        }).then(res=>{
          this.$ls.set('menu',res)
          this.$store.commit('SET_MENU',res)
          this.$store.commit('SET_ROUTER',res)
          this.$router.push('home');
        }).finally(()=>{
          this.loginLoading = false;
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .login_content{
    width: 100%;
    height: 100%;
    background-image: url('../../assets/img/login.jpg');
    background-size: 100% auto;
    background-repeat: no-repeat;
  }
  .login_card{
    position: fixed;
    width: 30vw;
    height: 40vh;
    top: 50%;
    left: 10%;
    text-align: center;
    margin-top: -20vh;
    background: rgba(255,193,255,0.1);
    border-radius: 10px;
    .login_card_title{
      font-size: x-large;
      color: white;
    }
    .login_input{
      width: 22vw;
      margin-top: 1vh;
      font-size: 2vh;
      i{
        line-height: 5vh;
        margin-right: 1vw;
        color: #000;
      }
    }
    ::v-deep .el-input__inner{
      height: 5vh;
      border-radius: 2.5vh;
      background: rgba(255,255,255,0.3);
      color: #000;
    }
    .login_button{
      width: 22vw;
      height: 5vh;
      line-height: 5vh;
      padding: 0;
      margin-top: 3vh;
      border-radius: 2.5vh;
      font-size: x-large;
    }
  }
</style>
